<template>
  <div>
    <div class="lists-container">
      <div class="lists-wrapper">
        <div class="user-list"
             v-show="list.length">
          <van-list v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    finished-text=""
                    @load="onLoad">
            <div class="order-box"
                 v-for="(listsItem,index) in list"
                 :key="index">
              <div class="dhs-virtual-icon"
                   v-if="listsItem.is_dhs_virtual==1"></div>
              <!-- 上面部分 -->
              <section class="order-list-info clearfix">
                <a href>
                  <span class="fl">
                    <p>订单：{{listsItem.order_no}}</p>
                    <p>日期：{{listsItem.create_time}}</p>
                  </span>
                  <span v-if="listsItem.status==3"
                        class="status fr completed"></span>
                  <span v-else-if="listsItem.status==4"
                        class="status fr orderClose"></span>
                  <span v-else
                        class="status fr"
                        :class="listsItem.is_presale?'red':''">{{listsItem.status_name}}</span>
                </a>
              </section>
              <!-- 中间部分 -->
              <section class="order-goods">
                <ul>
                  <li class="goods-li"
                      v-for='(subItem,idx) in listsItem.order'
                      :key="idx">
                    <section class="order-goods-img"
                             @click="JumpName('item-detail',{'detailId':subItem.item_id})">
                      <img :src="subItem.pic_url+'160x160'" width="80" height="80" v-if="subItem.is_compress==1"/>
                      <img :src="subItem.pic_url" width="80" height="80" v-else/>
                    </section>
                    <section class="order-goods-infor g-flex">
                      <div class="left">
                        <p class="goods-title"
                          @click="JumpName('item-detail',{'detailId':subItem.item_id})">{{subItem.title}}</p>
                        <p class="goods-props"
                          v-if="subItem.props">{{subItem.props}}</p>
                        <p class="goods-props">昵称：{{listsItem.user_nickname}}</p>
                        <p class="price fl fontAliBaba">{{subItem.pay_type && subItem.pay_type==5?'&dollar;':`${mSymbol.name}`}}<em v-html="scaleGoodsPriceFn(subItem.current_price)"></em></p>
                      </div>
                      <section class="right">
                        <span class="num fr"><i>x</i>{{subItem.num}}</span>
                      </section>
                    </section>
                  </li>
                </ul>
              </section>

              <section class="order-pay">
                <div class="good-price-box">
                  <span>
                    商品总价：<span class="good-total-price fontAliBaba"
                          v-if="listsItem.pay_type && listsItem.pay_type==5"><i>&dollar;</i><em>{{listsItem.total_fee}}</em></span><span class="good-total-price fontAliBaba"
                          v-else><i>{{mSymbol.name}}</i><em>{{listsItem.total_fee}}</em></span>
                  </span>
                </div>
              </section>
            </div>
          </van-list>
        </div>
        <div v-show="!list.length && finished">
          <no-data :noData="noData"></no-data>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import noData from '@/components/noData/index'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import { getVirtualVenderOrder } from '@/api/user/dhs/dhsApi'
import { mapGetters } from 'vuex'

import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无订单',
        marginTop: '120px'
      },
      p: 2,
      loading: false,
      finished: false,
      error: false,
      ftitle_dhs_virtual_order: '下级虚拟订单',
      list: [],
      order_type: 0, // 订单类型 1进货单 2发货单 其他值为全部订单
    }
  },
  created() {
    // 初始数据
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    // 价格
    scaleGoodsPriceFn(price) {
      return scaleGoodsPriceNoMark(price)
    },
    init() {
      this.order_type = this.$route.query.order_type
      this.$loadingWrap.show()
      getVirtualVenderOrder({ 'order_type': this.order_type }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.ftitle_dhs_virtual_order = res.data.ftitle_dhs_virtual_order

          // 页面标题
          let pageTitle = ''
          if (this.order_type==1) {
            pageTitle = '下级进货单'
          } else if(this.order_type==2) {
            pageTitle = '下级发货单'
          } else {
            pageTitle = this.ftitle_dhs_virtual_order
          }
          wx.setNavigationBarTitle({
            title: pageTitle
          })

          this.list = res.data.lists // 全部订单

          // 其它
          if (!this.list.length) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      const data = {
        p: this.p,
        'order_type': this.order_type
      }
      getVirtualVenderOrder(data)
        .then(res => {
          this.loading = false
          if (res.data.length) {
            this.list = this.list.concat(res.data)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    goBack() {
        // TODO 返回
        wx.navigateBack({
          delta: 1
        })
    },
    // 跳转商品详情
    JumpName(url,data) {
      this.$JumpName(this,url,data)
    }
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/order/lists";
.lists-container {
  padding:20px 25px;
  .order-goods {
    .goods-title {
      @include lineClamp(24px, 1.4, 1);
    }
    .price{
      color: #F30C23;
    }
  }
  .good-total-price{
    color: #F30C23;
  }
}
</style>
